<template>
  <div class="layout">
    <Header :username="'admin'" />
    <div class="main-content">
      <Menu />
      <div class="content-area">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Header from '@/components/header.vue';
import Menu from '@/components/menu.vue';
</script>

<style scoped lang="scss">
.layout {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
}
.main-content {
  flex: 1;
  display: flex;
  height: calc(100vh - 60px); // header高度为60px
}
.content-area {
  flex: 1;
  margin: 12px;
  // padding: 24px;
  height: calc(100vh - 132px);
  width: calc(100vw - 248px);

  overflow: auto;
}
</style>
